<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 4000px;
        }
        
        .angel {
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="鼠标事件对象.png" alt="">
    <img class="angel" src="素材/angel.gif" alt="">
    <script>
        // 鼠标事件对象，MouseEvent
        document.addEventListener('click', function(e) {
            // clientX clientY 返回鼠标在可视区的x和y （浏览器内容边框）
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('----------------------------------------');
            // pageX pageY 返回距离页面文档的 X Y (IE9 +)
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('----------------------------------------');
            // screenX screenY 鼠标距离电脑屏幕的X Y
            console.log(e.screenX);
            console.log(e.screenY);
        });
        // 跟随鼠标的图片
        var img = document.querySelector('.angel');
        // mousemove 只要鼠标移动1px就会触发这个事件
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.top = y - 50 + 'px';
            img.style.left = x - 40 + 'px';
        });
    </script>
</body>

</html>